<!doctype html>
<html>
	<head>
		<title>jsPlumb demo 2 - jQuery</title>
		<meta http-equiv="X-UA-Compatible" content="IE=7">
		<link rel="stylesheet" href="/mp.css"></link>
		<link rel="stylesheet" href="../../css/jsPlumbDemo.css"></link>		
		<style type="text/css">		
		body { background-color:white; }
.window { border:2px dotted #346789; opacity:0.8; filter:alpha(opacity=80); width:14em; height:4em; z-index:20; position:absolute; color:white;font-family:helvetica;padding-top:0.9em; font-size:0.9em;text-align:center;cursor:default;}
#window1 { background-color:#225588; left:20em;}
#window2 { top:6em; left:21em;background-color:#558822;left:10em;top:12em;}
#window3 { top:20em;background-color:#882255; left:40em;top:12em;}
#window4 { top:4em; left:45em;background-color:#122704; left:4em;top:24em;}
#window5 {top:27em;left:18em;background-color:#041227;left:22em;top:24em;}
#window6 {top:35em;left:42em;background-color:#333300;left:47em;top:24em;}
#window7 {top:18em;left:40em;background-color:#872431;}
#window8 {left:63em;top:32em;background-color:#045803;}	
		</style>
	</head>
	<body onunload="jsPlumb.unload();">
		<div class="menu"><a href="../../doc/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
	
		<div class="window" id="window1">window one</div>
		<div class="window" id="window2">window two</div>
		<div class="window" id="window3">window three</div>
		<div class="window" id="window4">window four</div>
		<div class="window" id="window5">window five</div>
		<div class="window" id="window6">window six</div>
		<div id="explanation"></div>
	    
	    <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../js/1.2.3/jsPlumb-1.2.3-RC1.js"></script>
		<script type="text/javascript" src="../js/1.2.3/jsPlumb-defaults-1.2.3-RC1.js"></script>
		<script type="text/javascript" src="../js/1.2.3/jquery.jsPlumb-1.2.3-RC1.js"></script>		
		<script type="text/javascript" src="exampleConnector.js"></script>
						
		<script type="text/javascript">
			$(document).ready(function() {

				// notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother 
				// than the curves on the first demo, which use the default curviness value.
				jsPlumb.Defaults.Connector = new jsPlumb.Connectors.ExampleConnector(50);
				jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };           
				jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
				jsPlumb.Defaults.EndpointStyle = { fillStyle:'gray' };
				// here we set default source and target endpoints - note the triangle as the target.
				jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Dot({radius:5});
				jsPlumb.Defaults.Anchors =  [ jsPlumb.Anchors.BottomCenter, jsPlumb.Anchors.TopCenter ];

				jsPlumb.setDraggableByDefault(true);
				
				jsPlumb.connect({source:'window3', target:'window6'}); 
				jsPlumb.connect({source:'window1', target:'window2'}); 
				jsPlumb.connect({source:'window1', target:'window3'});
				jsPlumb.connect({source:'window2', target:'window4'});
				jsPlumb.connect({source:'window2', target:'window5'});
				
			});
		</script>	    	        
	</body>
</html>
